<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.bannerName" placeholder="备注名" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.bannerPosition" placeholder="展示位置" clearable style="width: 150px;" class="filter-item">
        <el-option v-for="item in bannerPositionList" :key="item.key" :label="item.value" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.bannerType" placeholder="跳转类型" clearable style="width: 150px;" class="filter-item">
        <el-option v-for="item in bannerTypeList" :key="item.key" :label="item.value" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        筛选
      </el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
    </div>
    <p style="font-size: small">* 维权保障、医疗互助、职工福利三个板块的轮播图仅固定展示排序权重最高的一张！</p>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      max-height="650"
      highlight-current-row
      style="width: 100%;"
      :row-style="{height:'32px'}"
      tooltip-effect="light"
    >
      <el-table-column label="ID" align="center" fixed width="80px">
        <template slot-scope="{row}">
          <span>{{ row.bannerId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注名" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
          <span>{{ row.bannerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="轮播图" align="center">
        <template slot-scope="{row}">
          <el-image style="max-width: 50px; max-height: 28px" :src="row.bannerImg" fit="contain" :preview-src-list="[row.bannerImg]" />
        </template>
      </el-table-column>
      <el-table-column label="展示位置" align="center">
        <template slot-scope="{row}">
          <el-tag size="mini" type="success"> {{ bannerPositionMap[row.bannerPosition] }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="跳转类型" align="center">
        <template slot-scope="{row}">
          <el-tag size="mini" type="primary"> {{ bannerTypeMap[row.bannerType] }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="跳转目标" min-width="78px" align="center">
        <template slot-scope="{row}">
          <!-- 无跳转 -->
          <el-button v-if="row.bannerType===0" slot="reference" size="mini" disabled>查看</el-button>
          <!-- 跳转网页 -->
          <el-popover
            v-if="row.bannerType===1"
            placement="right"
            width="350"
            trigger="click"
          >
            <el-row :gutter="20">
              <el-col :span="6" style="text-align: right"><span style="font-weight: bolder">链接地址</span></el-col>
              <el-col :span="18"><a :href="row.bannerLink" target="_blank" style="text-decoration: underline">{{ row.bannerLink }}</a></el-col>
            </el-row>
            <el-button slot="reference" size="mini">查看</el-button>
          </el-popover>
          <!-- 新闻 -->
          <el-popover
            v-if="row.bannerType===2"
            placement="right"
            width="350"
            trigger="click"
          >
            <el-row :gutter="20">
              <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">新闻编号</p></el-col>
              <el-col :span="18"><p>{{ tempNews.newsId }}</p></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">新闻标题</p></el-col>
              <el-col :span="18"><p>{{ tempNews.newsTitle }}</p></el-col>
            </el-row>
            <el-button slot="reference" size="mini" @click="getNews(row.bannerLink)">查看</el-button>
          </el-popover>
          <!-- 商品 -->
          <el-popover
            v-if="row.bannerType===3"
            placement="right"
            width="350"
            trigger="click"
          >
            <el-row :gutter="20">
              <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">商品编号</p></el-col>
              <el-col :span="18"><p>{{ tempProduct.productNo }}</p></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">商品名称</p></el-col>
              <el-col :span="18"><p>{{ tempProduct.productName }}</p></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">所属商城</p></el-col>
              <el-col :span="18"><p>{{ mallMap[tempProduct.mallId] }}</p></el-col>
            </el-row>
            <el-button slot="reference" size="mini" @click="getProduct(row.bannerLink)">查看</el-button>
          </el-popover>
          <!-- 无跳转 -->
          <el-button v-if="row.bannerType===4" slot="reference" size="mini" disabled>查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="排序权重" align="center" width="110px">
        <template slot-scope="{row}">
          <el-tag size="mini" effect="plain" type="primary"> {{ row.bannerRank }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最近修改时间" width="160px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="320px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="primary" size="mini" @click="handleRank(row)">
            排序
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row.bannerId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-size.sync="listQuery.pageSize" @pagination="showBannerList" />

    <el-dialog title="设置排序权重" :visible.sync="dialogVisible" width="225px">
      <el-input-number v-model="tempRank.bannerRank" :min="0" :step="1" step-strictly style="text-align: center" />
      <p style="color: gray">(权重数字越大，展示越靠前)</p>
      <p style="color: gray"></p>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button size="small" type="primary" @click="setRank()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteBanner, showBannerList, updateRank, getProduct, getNews } from '@/api/banner'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'

export default {
  name: 'Banner',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      dialogLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        bannerName: '',
        bannerPosition: undefined,
        bannerType: undefined
      },
      tempRank: {
        bannerId: undefined,
        bannerRank: 0
      },
      tempProduct: {
        productId: undefined,
        productNo: '',
        productName: '',
        mallId: 0
      },
      tempNews: {
        newsId: undefined,
        newsTitle: ''
      },
      dialogVisible: false,
      bannerPositionList: [
        { key: 0, value: '首页' },
        { key: 1, value: '维权保障' },
        { key: 2, value: '医疗互助' },
        { key: 3, value: '网上商城首页' },
        { key: 4, value: '爱心帮扶' },
        { key: 5, value: '特价商城' },
        { key: 6, value: '积分商城' },
        { key: 7, value: '职工福利' }
      ],
      bannerTypeList: [
        { key: 0, value: '无跳转' },
        { key: 1, value: '网页' },
        { key: 2, value: '新闻' },
        { key: 3, value: '商品' },
        { key: 4, value: '答题' }
      ],
      bannerPositionMap: {
        0: '首页',
        1: '维权保障',
        2: '医疗互助',
        3: '网上商城首页',
        4: '爱心帮扶',
        5: '特价商城',
        6: '积分商城',
        7: '职工福利'
      },
      bannerTypeMap: {
        0: '无跳转',
        1: '网页',
        2: '新闻',
        3: '商品',
        4: '答题'
      },
      mallMap: {
        1: '爱心帮扶',
        2: '特价商城',
        3: '积分商城'
      }
    }
  },
  created() {
    this.showBannerList()
  },
  methods: {
    showBannerList() {
      this.listLoading = true
      this.listQuery.departmentId = this.$store.getters.tmpDepartmentId
      showBannerList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.showBannerList()
    },
    handleCreate() {
      this.$router.push({
        name: 'BannerEdit',
        params: { id: 0 }
      })
    },
    handleUpdate(row) {
      this.$router.push({
        name: 'BannerEdit',
        params: {
          id: row.bannerId
        }
      })
    },
    resetRankDialog() {
      this.tempRank = {
        bannerId: undefined,
        bannerRank: 0
      }
    },
    handleRank(row) {
      this.resetRankDialog()
      this.tempRank.bannerId = row.bannerId
      this.tempRank.bannerRank = row.bannerRank
      this.dialogVisible = true
    },
    setRank() {
      updateRank(this.tempRank).then(() => {
        this.showBannerList()
        this.dialogVisible = false
        this.$notify({
          title: 'Success',
          message: '设置排序权重成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDelete(bannerId) {
      this.$confirm('此删除操作不可逆，是否继续?', '提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBanner(bannerId).then(() => {
          this.showBannerList()
          this.dialogVisible = false
          this.$notify({
            title: 'Success',
            message: '删除轮播图成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    getProduct(productNo) {
      getProduct(productNo).then(response => {
        this.tempProduct = response.data
      })
    },
    getNews(newsId) {
      getNews(newsId).then(response => {
        this.tempNews = response.data
      })
    }
  }
}
</script>
